<template>
  <view class="content">
    <view class="swiper-wrap">
      <view class="swiper-box">
        <swiper class="swiper-box" :autoplay="autoplay" :duration="duration" :circular="circular" :current="current">
          <swiper-item v-for="(item, idx) in bannerList" :key="idx" @tap="goToGoodAndShowIt(item)">
            <view class="swiper_item"><image class="swiper_img" mode="aspectFill" :src="item.thumb" /></view>
          </swiper-item>
        </swiper>
      </view>
      <image class="uni_prve" @tap="imagePrev" src="/static/img/prve.png"></image>
      <image class="uni_next" @tap="imageNext" src="/static/img/next.png"></image>
    </view>
  </view>
</template>

<script>
import { debounce } from '@/common/util.js';
export default {
  props: {
    bannerList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      autoplay: true,
      interval: 3000,
      duration: 500,
      circular: true,
      current: 0
    };
  },
  methods: {
    // 上一页
    imagePrev: debounce(function() {
      if (this.current === 0) {
        this.current = this.bannerList.length - 1;
      } else {
        this.current = this.current - 1;
      }
    }, 150),
    // 下一页
    imageNext: debounce(function() {
      if (this.current === this.bannerList.length - 1) {
        this.current = 0;
      } else {
        this.current = this.current + 1;
      }
    }, 150),
		goToGoodAndShowIt(item) {
			if (item.url) {
				this.$common.navigateTo(item.url);
			} else if (item.news_id){
				console.log('/pages/news/detail?id=' + item.news_id)
				this.$common.navigateTo('/pages/news/detail?id=' + item.news_id);
			} else {
				console.log('no url')
			}
		}
  }
};
</script>

<style lang="scss" scoped>
/* 遮罩 */
.swiper-wrap {
  position: fixed;
  top: 8vw;
  left: 0;
  right: 0;
  bottom: 10vw;
  background: #2a2a2a;
  .swiper-box {
    width: 100%;
    height: 100%;
  }
  .swiper_img {
    margin: 3vw auto;
    display: block;
    width: 52vw;
    height: 46vw;
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.8);
  }
  .uni_prve,
  .uni_next {
    width: 5vw;
    height: 5vw;
    position: absolute;
    top: 30vh;
  }
  .uni_prve {
    left: 13vw;
  }
  .uni_next {
    right: 13vw;
  }
}
</style>
